<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1"/>
		<link rel="stylesheet" type="text/css" href="css/Reset.css"/>
		<link rel="stylesheet" type="text/css" href="css/style.css"/>
		<link rel="stylesheet" type="text/css" href="font/iconfont.css"/>
		<script src="../js/jquery-1.12.4.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="wrapper">
			<header class="header">
				<i id="list" class="iconfont"></i>
				<span>青春修炼手册</span>
				<i id="more" class="iconfont"></i>
			</header>
			<section class="main">
				<h3><i>TFBOYS</i></h3>
				<ul class="style">
					<li>标准<i class="iconfont"></i></li>
					<li>标准</li>
					<li>标准</li>
					<li>标准</li>
				</ul>
				<section id="disc"></section>
				<section class="audio">
					<audio id="ad" loop="loop" src="audio/蔡健雅 - 被驯服的象.mp3"></audio>
					<div class="process">
						<span id="curtime">00:00</span>
						<div id="processbar">
							<div id="played"></div>
							<div id="ball"></div>
						</div>
						<span id="totaltime"></span>
					</div>
					<ul class="play">
						<li id="last" class="iconfont"></li>
						<li id="play" class="iconfont"></li>
						<li id="next" class="iconfont"></li>
					</ul>					
				</section>
				
			</section>
			<nav class="footer">
				<ul>
					<li class="iconfont"></li>
					<li class="iconfont"></li>
					<li class="iconfont"></li>
					<li class="iconfont"></li>
					<li class="iconfont"></li>
				</ul>
			</nav>
		</div>
	</body>
	<script type="text/javascript">
	
	var html = document.querySelector('html');
	html.style.fontSize = html.offsetWidth/7.5 +'px';
	html.addEventListener('resize',function(){
		html.style.fontSize = html.offsetWidth/7.5 +'px';
	});
	
	var $ad = $('#ad')[0];	//音乐播放器
	$(function(){	
		$('#curtime').html($ad.currentTime);
		$('#totaltime').html($ad.duration);
	})
	
//	console.log($('#totaltime').html());
//	console.log(isNaN($ad.duration)?getTime():$ad.duration)
	
	
	var flag = true;		//音乐播放器的开关
	$('#play').click(function(){
		if(flag){
			$ad.play();
			$('#disc').css({
				"animation-play-state":"running"
			});
			flag = false;
		}else{
			$ad.pause();
			$('#disc').css({
				"animation-play-state":"paused"
			});
			flag = true;
		}		
	})
	
	
	
	$ad.addEventListener("timeupdate",function(s){
		$('#curtime').html($ad.currentTime);
		$('#totaltime').html($ad.duration);
		$('#played').css("width",$ad.currentTime/$ad.duration*$('#processbar').width()+'px');
		$('#ball').css("left",$ad.currentTime/$ad.duration*$('#processbar').width()+"px");		
	})
	
	$('#ball').on("touchstart",function(event){
//		flag = true;
		var e = event.originalEvent.changedTouches[0];
//		console.log(e);
		var x = e.clientX;
		var ballLeft = $('#ball').position().left;
		$(document).on("touchmove.a",function(ev){
			var e = ev.originalEvent.changedTouches[0];
			var left = ballLeft +e.clientX - x;
			if(left<=0){
				$('#ball').css({'left':0+'px'});
			}else if(left>=$('#processbar').width()){
				$('#ball').css({'left':$('#processbar').width()+'px'});
			}
			$('#ball').css({'left':left+'px'});
//			console.log($('#ball').css('left'));
//			console.log($('#played').width());
			$ad.currentTime = left/$('#processbar').width()*$ad.duration;			
			return false;
		})
		$(document).on("touchend.a",function(){
			isDraging = false;
			$(document).off('.a');
		});
	})
	
	
	
	
	
	</script>
</html>
